<template>
    <div v-if="type==='input'">
        <el-form-item :label="label" :prop="fieldName" :rules="rules">
            <el-input @change="changeValue" size="small" v-model="value"></el-input>
        </el-form-item>
    </div>
    <div v-else-if="type==='inputNumber'">
        <el-form-item :label="label" :prop="fieldName" :rules="rules">
            <el-input-number @change="changeValue" controls-position="right" size="small"
                             v-model="value"></el-input-number>
        </el-form-item>
    </div>
    <div v-else-if="type==='textarea'">
        <el-form-item :label="label" :prop="fieldName" :rules="rules">
            <el-input
                    type="textarea"
                    size="small"
                    :rows="3"
                    @change="changeValue"
                    :value="value">
            </el-input>
        </el-form-item>
    </div>
    <div v-else-if="type==='select'">
        <el-form-item :label="label" :prop="fieldName" :rules="rules">
            <el-select @change="changeValue" clearable size="small" v-model="selectValue">
                <el-option
                        v-for="item in column.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
    </div>
    <div v-else-if="type==='radio'">
        <el-form-item :label="label" :prop="fieldName" :rules="rules">
            <el-radio-group @change="changeValue" v-model="selectValue">
                <el-radio v-for="item in column.options" :key="item.value" :label="item.value">{{item.label}}</el-radio>
            </el-radio-group>
        </el-form-item>
    </div>
    <div v-else-if="type==='autoSelect'">
        <el-form-item :label="label" :prop="fieldName" :rules="rules">
            <AutoSelectForm @selectCb="changeValueChild" size="small" :multiple="column.multiple" :defaultValue="value"
                            :key="fieldName"
                            :fieldName="fieldName"
                            :dataType="dataType||''"></AutoSelectForm>
        </el-form-item>
    </div>
    <div v-else-if="type==='autoCascader'">
        <el-form-item :label="label" :prop="fieldName" :rules="rules">
            <AutoCascaderForm @selectCb="changeValueChild" size="small"  :defaultValue="value"
                              :key="fieldName"
                              :changeOnSelect="column.changeOnSelect"
                              :fieldName="fieldName"
                              :dataType="dataType||''"></AutoCascaderForm>
        </el-form-item>
    </div>
    <div v-else-if="type==='upload'">
        <el-form-item :label="label" :prop="fieldName" :rules="rules">
            <Upload @selectCb="changeValueChild" :defaultValue="value" :key="fieldName" :fieldName="fieldName"
            ></Upload>
        </el-form-item>
    </div>
</template>
<script>
    import AutoSelectForm from './AutoSelectForm'
    import AutoCascaderForm from './AutoCascaderForm'
    import Upload from './Upload'

    export default {
        name: 'customFormItem',
        data() {
            return {
                value: this.defaultValue || '',
                selectValue: this.defaultValue || ''
            }
        },
        props: {
            label: String,
            fieldName: String,
            type: String,
            changeFieldValue: Function,
            column: Object,
            dataType: String,
            defaultValue: {},
            rules: {
                type: Array,
                default: () => []
            }
        },
        methods: {
            changeValue(value) {
                this.$emit('changeFieldValue', {
                    fieldName: this.fieldName,
                    value: value
                })
            },
            changeValueChild(value) {
                this.$emit('changeFieldValue', {
                    fieldName: this.fieldName,
                    value: value.value
                })
            }
        },
        watch: {
            defaultValue: function (n) {
                this.selectValue = n
                this.value = n
            }
        },
        components: {
            AutoSelectForm,
            Upload,
            AutoCascaderForm
        }
    }
</script>
